import { Tag, Upload, Descriptions, Input, Button, Skeleton, message, Spin, Select } from "antd"
import { useEffect, useState } from "react";
import { AddSupplier, Admin_GetBusinessTypes } from "../../api/supplier";
import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
/**
 * 
 * @returns 新增供应商
 */
const SuppplierAdd = () => {
    document.info = [
        {
            title: "新增",
            url: "/supplier/add",
        },
        {
            title: "供应商管理",
            url: "/supplier",
        }
    ]

    const [loading, setLoading] = useState(false);

    const [sloading, setSLoading] = useState({
        loadinga: false,
        loadingb: false,
        loadingc: false,
        isFirst: true
    });
    //上传使用
    const uploadButton = (
        <button
            style={{
                border: 0,
                background: 'none',
            }}
            type="button"
        >
            {sloading.loadinga ? <LoadingOutlined /> : <PlusOutlined />}
            <div
                style={{
                    marginTop: 8,
                }}
            >
                Upload
            </div>
        </button>
    );

    //上传使用 2
    const uploadButtonb = (
        <button
            style={{
                border: 0,
                background: 'none',
            }}
            type="button"
        >
            {sloading.loadingb ? <LoadingOutlined /> : <PlusOutlined />}
            <div
                style={{
                    marginTop: 8,
                }}
            >
                Upload
            </div>
        </button>
    );

    //上传使用 c
    const uploadButtonc = (
        <button
            style={{
                border: 0,
                background: 'none',
            }}
            type="button"
        >
            {sloading.loadingc ? <LoadingOutlined /> : <PlusOutlined />}
            <div
                style={{
                    marginTop: 8,
                }}
            >
                Upload
            </div>
        </button>
    );

    const [users, setUser] = useState({
        name: "",
        phone: "",
        enterpriseName: "",
        types: [],
        logo: "",
        photo: "",
        qualification: "",
        type: "",
        address: "",
        announcement: ""
    });

    const [imageUrl, setImageUrl] = useState(); //上传1
    const [imageUrlb, setImageUrlb] = useState(); //上传2
    const [imageUrlc, setImageUrlc] = useState(); //上传3
    const methods = {
        //获取经营种类
        getTypes: async () => {
            const res = await Admin_GetBusinessTypes({ page: 1, limit: 999 });
            if (res.result === 0) {
                const result = res.data.data.map((d) => ({ label: d.name, value: d.id }));
                setUser((users) => ({ ...users, types: result }));
                setSLoading((sloading) => ({ ...sloading, isFirst: false }))
            } else {
                message.error(res.message);
            }
        },
        //企业公告
        getAnnouncement: (e) => {
            setUser((users) => ({ ...users, announcement: e.target.value }));
        },
        //地址
        getAddress: (e) => {
            setUser((users) => ({ ...users, address: e.target.value }));
        },
        //企业负责人
        getEnterpriseName: (e) => {
            setUser((users) => ({ ...users, enterpriseName: e.target.value }));
        },
        //姓名
        getName: (e) => {
            setUser((users) => ({ ...users, name: e.target.value }));
        },
        //手机号
        getPhone: (e) => {
            setUser((users) => ({ ...users, phone: e.target.value }));
        },
        //类型改变事件
        handleChange: (value) => {
            setUser((users) => ({ ...users, type: value }));
        },
        //上传使用 
        beforeUpload: (file) => {
            const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
            if (!isJpgOrPng) {
                message.error('You can only upload JPG/PNG file!');
            }
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isLt2M) {
                message.error('Image must smaller than 2MB!');
            }
            return isJpgOrPng && isLt2M;
        },
        //上传使用 1
        uploadHandleChange: (info) => {
            if (info.file.response) {
                setUser((users) => ({ ...users, logo: info.file.response }));
            }
            if (info.file.status === 'uploading') {

                setSLoading((sloading) => ({ ...sloading, loadinga: true }));
                return;
            }
            if (info.file.status === 'done') {
                // Get this url from response in real world.
                methods.getBase64(info.file.originFileObj, (url) => {

                    setSLoading((sloading) => ({ ...sloading, loadinga: false }));
                    setImageUrl(url);
                });
            }
        },

        //上传使用 2
        uploadHandleChangeb: (info) => {
            if (info.file.response) {
                setUser((users) => ({ ...users, photo: info.file.response }));
            }
            if (info.file.status === 'uploading') {

                setSLoading((sloading) => ({ ...sloading, loadingb: true }));
                return;
            }
            if (info.file.status === 'done') {
                // Get this url from response in real world.
                methods.getBase64(info.file.originFileObj, (url) => {

                    setSLoading((sloading) => ({ ...sloading, loadingb: false }));
                    setImageUrlb(url);
                });
            }
        },
        //上传使用 3
        uploadHandleChangec: (info) => {
            if (info.file.response) {
                setUser((users) => ({ ...users, qualification: info.file.response }));
            }
            if (info.file.status === 'uploading') {

                setSLoading((sloading) => ({ ...sloading, loadingc: true }));
                return;
            }
            if (info.file.status === 'done') {
                // Get this url from response in real world.
                methods.getBase64(info.file.originFileObj, (url) => {

                    setSLoading((sloading) => ({ ...sloading, loadingc: false }));
                    setImageUrlc(url);
                });
            }
        },

        //上传使用
        getBase64: (img, callback) => {
            const reader = new FileReader();
            reader.addEventListener('load', () => callback(reader.result));
            reader.readAsDataURL(img);

        }
    }



    const addSupplier = async () => {
        setLoading(true);
        const res = await AddSupplier({ ...users });
        if (res?.result === 0) {
            message.success("操作成功");
            setLoading(false);
        } else {
            message.error(res.message);
            setLoading(false);
        }
    }


    //描述列表
    const items = [
        {
            key: '1',
            label: '名称',
            children:
                <Input onChange={(e) => methods.getName(e)} value={users.name}></Input>
        },
        {
            key: '2',
            label: '电话',
            span: 2,
            children: <Input onChange={(e) => methods.getPhone(e)} value={users.phone} maxLength={11}></Input>
        },
        {
            key: '3',
            label: '负责人',
            span: 2,
            children: <Input onChange={(e) => methods.getEnterpriseName(e)} value={users.enterpriseName} maxLength={11}></Input>
        },
        {
            key: '4',
            label: '经营种类',
            span: 3,
            children: <Select
                placeholder="请选择经营种类"
                style={{
                    width: "100%",
                }}
                onChange={methods.handleChange}
                options={users.types}
            >

            </Select>
        },
        {
            key: '5',
            label: '地址',
            span: 2,
            children: <Input.TextArea onChange={(e) => methods.getAddress(e)} maxLength={500} value={users.address} ></Input.TextArea>
        },
        {
            key: '6',
            label: '企业公告',
            span: 3,
            children: <Input.TextArea onChange={(e) => methods.getAnnouncement(e)} value={users.announcement} maxLength={500}></Input.TextArea>
        },
        {
            key: '7',
            label: '企业logo',
            span: 2,
            children: <Upload
                name="avatar"
                listType="picture-card"
                className="avatar-uploader"
                showUploadList={false}
                action="https://sapi.jiangdaye.cn/api/Resource/Upload"
                beforeUpload={methods.beforeUpload}
                onChange={methods.uploadHandleChange}
            >
                {imageUrl ? (
                    <img
                        src={imageUrl}
                        alt="avatar"
                        style={{
                            width: '100%',
                        }}
                    />
                ) : (
                    uploadButton
                )}
            </Upload>
        },
        {
            key: '8',
            label: '企业图片',
            span: 3,
            children: <Upload
                name="avatar"
                listType="picture-card"
                className="avatar-uploader"
                showUploadList={false}
                action="https://sapi.jiangdaye.cn/api/Resource/Upload"
                beforeUpload={methods.beforeUpload}
                onChange={methods.uploadHandleChangeb}
            >
                {imageUrlb ? (
                    <img
                        src={imageUrlb}
                        alt="avatar"
                        style={{
                            width: '100%',
                        }}
                    />
                ) : (
                    uploadButtonb
                )}
            </Upload>
        },
        {
            key: '9',
            label: '企业资质文件',
            span: 3,
            children: <Upload
                name="avatar"
                listType="picture-card"
                className="avatar-uploader"
                showUploadList={false}
                action="https://sapi.jiangdaye.cn/api/Resource/Upload"
                beforeUpload={methods.beforeUpload}
                onChange={methods.uploadHandleChangec}
            >
                {imageUrlc ? (
                    <img
                        src={imageUrlc}
                        alt="avatar"
                        style={{
                            width: '100%',
                        }}
                    />
                ) : (
                    uploadButtonc
                )}
            </Upload>
        },
        {
            key: '10',
            label: '行为',
            span: 3,
            children: <Button type="primary" onClick={() => { addSupplier() }}
                disabled={
                    users.phone.length !== 11
                    || users.name === ""
                    || users.enterpriseName === ""
                    || users.type === ""
                    || users.logo === ""
                    || users.photo === ""
                    || users.qualification === ""
                }>新增</Button>
        }
    ]

    useEffect(() => {
        methods.getTypes();
    }, [])

    return (
        <>
            <div className="Containers">
                <Skeleton active loading={sloading.isFirst} paragraph={{ rows: 15 }}>
                    <Spin
                        spinning={loading}
                        indicator={
                            <LoadingOutlined
                                style={{
                                    fontSize: 24,
                                }}


                            />
                        }
                    >
                        <div className='pds'>

                            <Descriptions title="新增供应商" layout="vertical" bordered items={items} />
                        </div></Spin>
                </Skeleton>
            </div>
        </>

    )
}

export default SuppplierAdd